<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div ref="mymsg">{{msg}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data() {
          return {
            msg: '你好'
          }
        },
        methods: {
          say() {
            alert(1)
          }
        },
        computed: {},
        watch: {},
        // 生命周期钩子函数
        beforeCreate() {
          //实例创建前
          console.group('实例创建前')
          // console.log(this.$el) //undefined
          // console.log(this.msg) //undefined
          // this.say()  //undefined
        },
        created() {
          //实例创建后
          // console.group('实例创建后')
          // console.log(this.$el) //undefined
          // console.log(this.msg) //你好
          // this.say() //正常调用
        },
        beforeMount() {
          //实例挂载前
          // console.group('实例挂载前')
          // console.log(this.$el) //div#app
          // console.log(this.msg) //你好
          // this.say() //正常调用
        },
        mounted() {
          //实例挂载后
          // console.group('实例挂载后')
          // console.log(this.$el) //div#app
          // console.log(this.msg) //你好
          // this.say() //正常调用
          // // $refs.元素或组件的名字 可以获取元素和组件
          // console.log('dom内容：' + this.$refs.mymsg.innerHTML)
          // console.groupEnd()
          this.msg = '清华同方'
        },
        beforeUpdate() {
          //实例更新前  数据发生了改变
          console.log('改变后的数据:' + this.msg)
        },
        updated() {
          //实例更新后 dom元素发生改变
          console.log('改变后的数据:' + this.msg)
        },
        beforeDestroy() {
          //实例销毁前
          console.log('销毁前')
        },
        destroyed() {
          //实例销毁后
          console.log('销毁后')
        }
      })
      // 全局实例api  $el $data $watch
      // $destroy()  销毁组件
      vm.$destroy()
      vm.$data.msg = '明天放假'
    </script>
  </body>
</html>
